---
title: Badge
description: A versatile badge component for displaying status, categories, or labels with multiple variants and styling options.
---
import { DefaultVariants, SizeVariants, MonoFont, StatusBadges, InteractiveBadges } from "./badge.example";

## Overview

The Badge component provides a consistent way to display status indicators, categories, or labels throughout your application. It's designed to provide quick visual context with multiple styling options and accessibility features.

## Usage

```tsx
import { Badge } from "@unkey/ui";

export default function MyComponent() {
  return (
    <div>
      <Badge variant="primary">Default</Badge>
      <Badge variant="success">Success</Badge>
      <Badge variant="error">Error</Badge>
    </div>
  );
}
```

## Examples

### Default Variants
All available variants for different use cases.
<DefaultVariants />

### Size Variants
Different sizes available for the badge component.

<SizeVariants />

### Monospace Font
Badges with monospace font for technical content like IDs or codes.

<MonoFont />

### Status Badges
Common status indicators used in applications.

<StatusBadges />

### Interactive Badges

Interactive styling with hover effects.

<InteractiveBadges />

## Features

- **Multiple Variants**: Six different visual styles (primary, secondary, success, warning, blocked, error)
- **Size Options**: Default and small sizes for different contexts
- **Font Options**: Support for monospace font for technical content
- **Accessibility**: Built-in accessibility support with proper contrast ratios
- **Customizable**: Extensive styling options through className prop
- **Responsive**: Adapts to different screen sizes

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `"primary" \| "secondary" \| "success" \| "warning" \| "blocked" \| "error"` | `"primary"` | The visual variant of the badge. |
| `size` | `"DEFAULT" \| "sm"` | `"DEFAULT"` | The size of the badge. |
| `font` | `"mono"` | - | Use monospace font for the badge text. |
| `className` | `string` | - | Additional CSS classes to apply to the badge. |

## Variants

- **primary**: Default neutral appearance with gray background
- **secondary**: Subtle border style with lighter background
- **success**: Green styling for positive states
- **warning**: Yellow/orange styling for warnings
- **blocked**: Orange styling for blocked or restricted states
- **error**: Red styling for errors or negative states

## Structure

The Badge component is a simple, self-contained component that doesn't require sub-components. It renders as a single span element with appropriate styling and accessibility attributes.

## Styling

The Badge component includes default styling with:

- Consistent padding and border radius
- Color-coded variants for semantic meaning
- Dark mode support
- Hover states for interactive badges
- Focus states for accessibility
- Responsive design

### Custom Styling

You can customize the appearance using the className prop:

```tsx
<Badge 
  variant="primary" 
  className="custom-badge-class hover:bg-blue-500"
>
  Custom Badge
</Badge>
```

## Accessibility

The Badge component follows accessibility best practices:

- **Semantic HTML**: Uses semantic HTML with proper color contrast ratios
- **Text Readability**: Text is readable and meets WCAG guidelines
- **Screen Reader Support**: Can be used with screen readers without issues
- **Visual Feedback**: Hover states provide visual feedback for interactive elements
- **Focus Management**: Proper focus states for keyboard navigation
